<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>ajax学习</title>
</head>
<body>
<script type="text/javascript">
function getXHR(){
  var xhr = null;
    // XMLHttpRequest 实例对象没有自有属性. 实际上, 它的所有属性均来自于 XMLHttpRequest.prototype
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("您的浏览器暂不支持Ajax!");
      }
    }
  }
  return xhr;
}
console.log(getXHR());
/*
这是 readyState 属性可能的值：
状态 描述
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
*/
// ajax 和 setTimeout 的事件回调都被同等的对待, 按照顺序自动的被添加到 任务队列 的末尾, 等待js引擎空闲时执行.
((url, method)=>{
	var xhr = getXHR();
	//每当 readyState 改变时，onreadystatechange 函数就会被执行。
	xhr.onreadystatechange=function(e){
		console.log("onreadystatechange===>"+this.readyState);
		console.log(e)
		if(xhr.readyState ===4 ){
			// console.log("responseText===>"+xhr.responseText)
		}
	}
 	xhr.onloadstart =function (ProgressEvent){
		console.log(ProgressEvent)
		console.log("onloadstart");
	}
	xhr.onprogress = function(ProgressEvent){
		console.log(ProgressEvent);
		console.log("onprogress")
	}
	xhr.onload = function (){
		console.log("onload");
	}
	xhr.open(method,url,true)//响应初始化
	// xhr.setRequestHeader('Cache-Control',3600);
	xhr.send();
})('https://user-gold-cdn.xitu.io/2017/3/15/c6eacd7c2f4307f34cd45e93885d1cb6.png','GET')

setTimeout(()=>{
	console.log("setTimeout");
},0)
console.warn('这里的log并不是最先打印出来的.');
</script>
</body>
</html>
